<template>
  <div class="realName">
    <div class="leftContent flexAlignCenter">
      <div class="contentPart" style="position:relative">
        <div style="position:absolute;top:-1rem;left:0">
          <img src="@/assets/img/laborDataCenter/topLine.png" alt />
        </div>
        <div style="position:absolute;bottom:-0.9rem;right:0">
          <img src="@/assets/img/laborDataCenter/bottomLine.png" alt />
        </div>
        <RealNameStatistics :realNameStatistics="realNameStatistics" />
      </div>
      <div class="contentPart" style="position:relative">
        <div style="position:absolute;top:-1rem;left:0">
          <img src="@/assets/img/laborDataCenter/topLine.png" alt />
        </div>
        <div style="position:absolute;bottom:-0.9rem;right:0">
          <img src="@/assets/img/laborDataCenter/bottomLine.png" alt />
        </div>
        <PostDistribution :postStatistics="postStatistics" />
      </div>
      <div class="contentPart" style="position:relative">
        <div style="position:absolute;top:-1rem;left:0">
          <img src="@/assets/img/laborDataCenter/topLine.png" alt />
        </div>
        <div style="position:absolute;bottom:-0.9rem;right:0">
          <img src="@/assets/img/laborDataCenter/bottomLine.png" alt />
        </div>
        <EducationalDistribution :qualificationStatistics="qualificationStatistics" />
      </div>
    </div>
    <div class="centerContent">
      <div class="mainTitle">
        【实名制登记人数】
        <span style="font-size:1.5rem">(在场)</span>
      </div>
      <div class="peopleNum">
        <!-- {{this.realNameStatistics.realNamePersonTotal}} -->
        <countTo :num="this.realNamePersonTotal"></countTo>
      </div>
      <div style="height:60%;position:relative">
        <MapDiv :mapData="mapData" />
        <div style="position:absolute;left:2rem;bottom:-10%;width:30%;">
          <Rank :provinceRanking="provinceRanking" />
        </div>
      </div>
    </div>
    <!-- //右侧内容 -->
    <div class="rightContent flexAlignCenter">
      <div class="contentPart" style="position:relative">
        <div style="position:absolute;top:-1rem;left:0">
          <img src="@/assets/img/laborDataCenter/topLine.png" alt />
        </div>
        <div style="position:absolute;bottom:-0.9rem;right:0">
          <img src="@/assets/img/laborDataCenter/bottomLine.png" alt />
        </div>
        <EntryAndExitNews />
      </div>
      <div class="contentPart" style="position:relative">
        <div style="position:absolute;top:-1rem;left:0">
          <img src="@/assets/img/laborDataCenter/topLine.png" alt />
        </div>
        <div style="position:absolute;bottom:-0.9rem;right:0">
          <img src="@/assets/img/laborDataCenter/bottomLine.png" alt />
        </div>
        <PeopleClassification :personClassification="personClassification" />
      </div>
      <div class="contentPart" style="position:relative">
        <div style="position:absolute;top:-1rem;left:0">
          <img src="@/assets/img/laborDataCenter/topLine.png" alt />
        </div>
        <div style="position:absolute;bottom:-0.9rem;right:0">
          <img src="@/assets/img/laborDataCenter/bottomLine.png" alt />
        </div>
        <AgeDistribution :ageStatistics="ageStatistics" />
      </div>
    </div>
  </div>
</template>

<script>
import RealNameStatistics from './realNameStatistics/index'
import PostDistribution from './postDistribution/index'
import AgeDistribution from './ageDistribution/index'
import MapDiv from './map/index'
import Rank from './map/rank.vue'
import PeopleClassification from './peopleClassification/index.vue'
import EducationalDistribution from './educationalDistribution/index.vue'
import EntryAndExitNews from './entryAndExitNews/index.vue'
import TopMenu from '@/views/home/projectDataCenter/topMenu/index.vue'
import { realNameStatistics } from '@/api/realNameStatistics'
import { mapGetters } from 'vuex'
import countTo from '@/components/countTo/index.vue'
export default {
  components: {
    RealNameStatistics,
    PostDistribution,
    AgeDistribution,
    MapDiv,
    Rank,
    PeopleClassification,
    EducationalDistribution,
    EntryAndExitNews,
    TopMenu,
    countTo
  },
  data() {
    return {
      mapData: {},
      ageStatistics: {},
      personClassification: {},
      realNamePersonTotal: 0,
      qualificationStatistics: {},
      realNameStatistics: {},
      provinceRanking: {},
      postStatistics: {}
    }
  },
  watch: {
    realNamePersonTotal: {
      handler(val, oldVal) {
        // console.log(val)
      },
      immediate: true
    }
  },
  methods: {
    //获取数据
    getData() {
      let data = { projectId: this.userInfo.projectId }
      realNameStatistics(data).then((res) => {
        let data = res.data.data
        this.mapData = data.provinceStatistics.provinceStatistics
        this.mapData.forEach((res) => {
          res.value = parseInt(res.value)
        })
        // console.log(this.mapData);

        this.ageStatistics = data.ageStatistics
        this.personClassification = data.personClassification
        this.personClassification.forEach((res) => {
          //  res.value=parseFloat(res.value.replace('%',''))
          if (res.name == 'special') {
            res.name = '特种作业人员'

            res['color'] = '#0ADEFF'
          } else {
            res.name = '一般作业人员'
            res['color'] = '#5AD2E0'
          }
        })
        this.realNamePersonTotal = data.realNameStatistics.realNamePersonTotal
        // console.log(this.realNamePersonTotal);

        this.qualificationStatistics = data.qualificationStatistics
        this.realNameStatistics = data.realNameStatistics

        this.provinceRanking = data.provinceStatistics.provinceRanking
        this.postStatistics = data.postStatistics
      })
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  mounted() {
    this.getData()
  }
}
</script>

<style scoped>
.leftContent,
.rightContent {
  position: absolute;
  top: 12rem;
  height: calc(100vh - 15.3rem);
  /* bottom:10.3rem; */
  width: 46rem;
}
.leftContent {
  left: 4.2rem;
}
.rightContent {
  right: 4.2rem;
}
.flexAlignCenter {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.contentPart {
  width: 100%;
  height: 30%;
  margin-bottom: 3%;
  /* height: 30%; */
  background: rgba(0, 246, 255, 0.05);
  padding: 1.5rem;
}
.centerContent {
  margin: 0 auto;
  width: 73.5rem;
  height: calc(100vh - 15.3rem);
  background: none;
  overflow: hidden;
  margin-top: 3rem;
}
.mainTitle {
  font-size: 5.2rem;
  width: 60.2rem;
  text-align: center;
  font-weight: 400;
  color: #5cffff;
  margin: 0 auto;
  margin-bottom: 3%;
  margin-top: 2.9rem;
}
.peopleNum {
  font-family: 'Agency-FB';
  font-size: 12rem;
  width: 45.2rem;
  text-align: center;
  font-weight: bold;
  margin: 0 auto;
  color: #fff95c;
  line-height: 100%;
  letter-spacing: 3rem;
}
</style>